در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون یک فریم ورک برای درست کردن قالب ایمیل واکنشگرا قرار داده شده و شما میتونین از قدرت اون بهره بگیرید و قالبهای مدنظرتون رو بسازید. این ابزار بر پایه Node.js هست و قابلیت های بسیار زیادی داره. روند کار به این صورته که شما در ابتدا با استفاده از زبان mjml که ساخته شده توسط همین ابزار هست، قالبتون رو تعریف میکنید و در نهایت با استفاده از ابزاری که وجود داره اون رو کامپایل کرده و تبدیل به html میکنید و میتونین از اون برای قالب ایمیل استفاده کنید. در آینده نزدیک احتمال داره که نحوه استفاده از این ابزار رو خدمتتون آموزش بدم.
برای شروع وارد سایت mjml بشین.
امیدوارم بدردتون بخوره.
موفق باشید.
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 364 تاريخ : چهارشنبه 30 تير 1395 ساعت: 7:40
در این قسمت میخوام یک کد ( Browser in CSS ) جالب رو در اختیارتون بزارم.
همونطور که دیدید ظاهر و رابط کاربری یک مرورگر با استفاده از CSS ساخته شده و تمام امکانات اون شبیه سازی شده. این مرورگر شبیه به مرورگر کروم موجود بر روی سیستم عامل Mac هست. میتونین از این کد ایده گرفته و از اون استفاده کنید.
بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.
موفق باشید.
یا علی
نوع کد رايگان
برچسب : نویسنده : استخدام کار 7learn بازدید : 295 تاريخ : چهارشنبه 30 تير 1395 ساعت: 7:40
توضیحات : سیستم عامل اندروید، با بیش از یک میلیارد کاربر در دنیا بالغ بر 70 درصد سهم سیستم عامل های تلفن های همراه را به خود اختصاص داده است. همین موضوع باعث شده تا بازار کاری با پتانسیل بالا برای برنامه نویسی اندروید ایجاد گردد. با توجه به استقبال کاربران و درخواست های مکرر شما دوستان عزیز سعی کردیم دوره ای جامع و کامل را در زمینه برنامه نویسی اندروید برگزار نماییم. در این دوره تمامی مفاهیم مقدماتی تا پیشرفته اندروید را به صورت کاملا پروژه محور آموزش خواهیم داد. پس از گذراندن این دوره می توانید هر برنامه و اپ اندرویدی که می خواهید، با بهترین کیفیت و آخرین تکنولوژی های روز تولید کنید. این دوره طوری طراحی شده که تمام نیازهای بازار کار را پاسخگو می باشد. زبان برنامه نویسی استفاده شده در این دوره جاواست که بهینه ترین، پر سرعت ترین و با کیفیت ترین اپ های اندروید را با آن می توان تولید کرد و گوگل این روش را با آخرین به روزرسانی ها به بهترین شکل پشتیبانی می کند. برای گذراندن این دوره، نیاز به تجربه برنامه نویسی پیشرفته ندارید، ما سعی کردیم اکثر مفاهیم مورد نیاز شما را در جلسات ابتدایی آموزش دهیم. این دوره نیز بر اساس اصل قیمت گذاری منصفانه در سون لرن با هزینه ای بسیار کمتر از آنچه در دوره های حضوری می پردازید در دسترس شما خواهد بود.
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 317 تاريخ : چهارشنبه 30 تير 1395 ساعت: 7:40
در این قسمت میخوام یک کد ( baby ) جالب رو در اختیارتون بزارم.
همونطور که دیدید یک نوزاد جالب با استفاده از CSS و HTML ساخته شده و بصورت انیمشنی نمایش داده شده.
بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.
موفق باشید.
یا علی
نوع کد رايگان
برچسب : نویسنده : استخدام کار 7learn بازدید : 330 تاريخ : دوشنبه 28 تير 1395 ساعت: 6:23
در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون ابزاری قرار داده شده که با استفاده از اون میتونین برای عکسهای خودتون فیلترهای زیبایی با استفاده از CSS قرار بدین و سایتتون رو زیباتر کنید. در بالای سایتی که لینکشو قرار دادم تعدادی مثال قرار داده شده که با هاور کردن بر روی هر کدام حالت اصلی عکس نمایش داده میشه. در آخر هم طرز استفاده از این ابزار رو گفته و میتونین از اون استفاده کنید.
برای شروع وارد سایت cssco بشین.
امیدوارم بدردتون بخوره.
موفق باشید.
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 334 تاريخ : دوشنبه 28 تير 1395 ساعت: 6:23
در این قسمت میخوام یک کد ( Bubble Menu ) جالب رو در اختیارتون بزارم.
همونطور که دیدید یک منوی حبابی و بسیار زیبا ساخته شده و قرار گرفته و زمانی که بر روی اون هاور میکنید بصورت بسیار زیبا از هم جدا میشن و زیر هم قرار میگیرن و دوباره با بیرون بردن ماوس از روی اونا، سر جای اولشون بر میگردن.
بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.
موفق باشید.
یا علی
نوع کد رايگان
برچسب : نویسنده : استخدام کار 7learn بازدید : 331 تاريخ : دوشنبه 28 تير 1395 ساعت: 6:23
در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون یک ویرایشگر قدرتمند متن برای کتابخانه React رو معرفی کرده و میتونین با استفاده از این ابزار محبوب و قوی، ویرایشگری رو در سایتتون قرار بدین که خیلی بهینه و عالی، متونی که کاربرانتون میخان رو درونش قرار بدن و در سایتتون انتشار بدن. این ویرایشگر پشتیبانی خوبی از مرورگرها داره و همچنین میتونین دستکاری های زیادی در اون انجام بدین تا متناسب با طرح و قابلیت های سایتتون بشه.
برای شروع وارد سایت draft-js بشین.
امیدوارم بدردتون بخوره.
موفق باشید.
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 359 تاريخ : يکشنبه 27 تير 1395 ساعت: 9:41
در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون یک ابزار قرار داده شده که با استفاده از اون میتونین کدهای CSS رو درون کدهای Javascript بنویسید و استایل صفحه رو تغییر بدین. به این صورت دیگه میتونین از قدرت محاسبه Javascript استفاده کنید و متناسب با شرایط کدهای CSS مختلفی رو اجرا کنید. این کدها میتونن در لحظه عوض بشن و کارای جالبی رو برای شما انجام بدن. این ابزار تقریبا کاری همانند preprocessor مثل sass رو برای شما انجام میده.
برای شروع وارد سایت descartes بشین.
امیدوارم بدردتون بخوره.
موفق باشید.
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 302 تاريخ : يکشنبه 27 تير 1395 ساعت: 9:41
در این قسمت میخوام یک کد ( Cog loading animation ) جالب رو در اختیارتون بزارم.
همونطور که دیدید یک لودینگ بسیار زیبا و بصورت چرخ دنده ساخته شده و قرار گرفته. این کار با استفاده از CSS صورت گرفته و میتونین از اون در سایت خودتون استفاده کنید و یا تغییراتی در اون بوجود بیارید.
بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.
موفق باشید.
یا علی
نوع کد رايگان
برچسب : نویسنده : استخدام کار 7learn بازدید : 406 تاريخ : يکشنبه 27 تير 1395 ساعت: 9:41
در این قسمت میخوام یک کد ( Author Quote ) جالب رو در اختیارتون بزارم.
همونطور که دیدید استایلی زیبا و حرفه ای برای نقل قولها قرار داده شده و شما میتونین از اون ایده گرفته و در سایتتون از اون استفاده کنید. با کلیک بر روی > و < میتونین به بعدی و قبلی برید.
بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.
موفق باشید.
یا علی
نوع کد رايگان
برچسب : نویسنده : استخدام کار 7learn بازدید : 335 تاريخ : شنبه 26 تير 1395 ساعت: 15:38
در این مطلب میخوام سایتی رو بهتون معرفی کنم که از نظر طراحی و رابط کاربری فوق العاده هست و میتونین از اون ایده های زیادی رو بگیرید. وقتی که بین صفحات سایت جابجا میشید افکتهای بسیار زیبایی اجرا میشه که واقعا آدم رو به وجد میاره. پیشنهاد میکنم چرخی در سایت بزنید تا با قابلیت های اون آشنا بشید.
برای شروع وارد سایت wonderlandindustry بشین.
امیدوارم بدردتون بخوره.
موفق باشید.
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 347 تاريخ : شنبه 26 تير 1395 ساعت: 15:38
در این مطلب با ادامه آموزش Google Maps در خدمتتون هستیم.
علاوه بر marker یا نشانه، چند ضلعی، دایره، مستطیل و بقیه اشکال موجود، ما همچنین میتونیم باکسها یا پنجره های اطلاعاتی یا Info Windows رو بر روی نقشه نمایش بدیم و با استفاده از اون، متنی رو به کاربر نمایش بدیم. این مطلب به شما آموزش میده که چطور از Info Windows استفاده کنید و نقشتون رو پیشرفته تر کنید.
Info Windows برای افزودن هر گونه متن و اطلاعاتی به نقشه مورد استفاده قرار میگیره. برای مثال، اگر شما بخواید اطلاعاتی در مورد یک نقطه خاص بر روی نقشه قرار بدید، شما میتونین از Info Window استفاده کنید. بطور معمول و عمدتا Info Window به نشانه یا Marker متصل و ربط داده میشه. شما میتونین برای ساختن یک Info Window یک نمونه جدید از شئ google.maps.InfoWindow رو بسازید. این مورد ویژگی های زیر رو پوشش میده:
مثال زیر رو ببینید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html>
<head> <script src = "http://maps.googleapis.com/maps/api/js"></script>
<script> function loadMap() {
var mapOptions = { center:new google.maps.LatLng(17.433053, 78.412172), zoom:5 }
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var infowindow = new google.maps.InfoWindow({ content:"388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA-500033", position: new google.maps.LatLng(20.433053, 78.412172), maxWidth: 200 });
infowindow.open(map); } </script>
</head>
<body onload = "loadMap()"> <div id = "sample" style = "width:580px; height:400px;"></div> </body>
</html> |
خروجی:
همچنین شما میتونین یک Info Window رو به یک نشانه یا Marker نسبت بدین و هر کاری که با Marker صورت بگیره، Info Window هم رفتار متناسب با اون نمایش میده. برای مثال کد زیر رو ببینید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html> <html>
<head> <script src = "http://maps.googleapis.com/maps/api/js"></script>
<script> function loadMap() {
var mapOptions = { center:new google.maps.LatLng(17.433053, 78.412172), zoom:5 }
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({ position: new google.maps.LatLng(17.433053, 78.412172), map: map, draggable:true });
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({ content:"Mohammad Esfandiari, <a href='http://farsial.com'>Farsial</a>" });
infowindow.open(map,marker); } </script>
</head>
<body onload = "loadMap()"> <div id = "sample" style = "width:580px; height:400px;"></div> </body>
</html> |
خروجی بصورت زیر هست:
همونطور که دیدید با درگ کردن نشانه، Window نیز همراه با اون جابجا میشه. همونطور که دیدید در ویژگی content میتونیم کدهای HTML هم وارد کنیم و درون Window نمایش بدیم. شما میتونین خودتون کد CSS هم قرار بدین و به این کدها استایل بدین. در نهایت با استفاده از کد زیر Window را به Marker متصل کردیم:
infowindow.open(map,marker); |
همونطور که دیدید با استفاده از open، باکس infoWindow ساخته شده رو به نشانه موجود بر روی نقشه نسبت دادیم. چون که این کار رو انجام دادیم و اون نشانه خودش مختصات داره، دیگه لازم نیس که برای Window خودمون از ویژگی position استفاده کنیم.
در جلسات بعدی بیشتر در مورد این ابزار قدرتمند گوگل صحبت میکنیم.
امیدوارم از این جلسه خوشتون اومده باشه.
موفق باشید
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 311 تاريخ : شنبه 26 تير 1395 ساعت: 15:38
در این مطلب با ادامه آموزش Google Maps در خدمتتون هستیم.
در جلسات قبلی در مورد اضافه کردن نشانه یا Marker و تغیییر و دستکاری در اون توضیح دادیم و شما رو با امکانات و قابلیتهای اون آشنا کردیم. علاوه بر اضافه کردن Marker شما میتونین اشکال هندسی مختلفی نظیر چندخطی ها، چند ضلعی ها، مستطیل و دایره و ... رو نیز به نقشتون و نقطه دلخواهتون اضافه کنید. در این جلسه و جلسه بعد، اشکال مهمی که میتونین به نقشه اضافه کنید رو بهتون آموزش میدیم.
با استفاده از قابلیت اضافه کردن Polylines که نقشه گوگل در اختیار ما قرار داده، میتونیم مسیرهایی رو بر روی نقشه مشخص کنیم. شما میتونین با استفاده از نمونه ساختن از شئ google.maps.polyline این کار رو انجام بدین. همچنین در زمان ساخت نمونه باید مقادیر مناسبی رو برای ویژگی های هر مسیر قرار بدیم. همانند جلسه قبل که با استفاده از متد setMap، نشانگر رو به نقشه متصل میکردیم، اینجا نیز به همین صورت عمل میکنیم.
در اینجا میخایم یک مثال رو براتون بزنیم که در اون 3 خط قرار گرفته و 4 نقطه نیویورک در آمریکا، لندن در انگلیس، دهلی نو در هند و پکن در چین رو به هم وصل کرده. برای اینکار بصورت زیر عمل میکنیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html> <html>
<head> <script src = "http://maps.googleapis.com/maps/api/js"></script>
<script> function loadMap(){
var mapProp = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:2, mapTypeId:google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var tourplan = new google.maps.Polyline({ path:[ new google.maps.LatLng(28.613939, 77.209021), new google.maps.LatLng(51.507351, -0.127758), new google.maps.LatLng(40.712784, -74.005941), new google.maps.LatLng(28.213545, 94.868713) ],
strokeColor:"#0000FF", strokeOpacity:0.6, strokeWeight:2 });
tourplan.setMap(map); } </script>
</head>
<body onload = "loadMap()"> <div id = "googleMap" style = "width:580px; height:400px;"></div> </body>
</html> |
خروجی بصورت زیر خواهد بود:
همونطور که دیدید خطوطی بین چهار مکانی که عرض کردم، رسم شده. برای این کار کدهای زیر استفاده شده:
1 2 3 4 5 6 7 8 9 10 11 12 | var tourplan = new google.maps.Polyline({ path:[ new google.maps.LatLng(28.613939, 77.209021), new google.maps.LatLng(51.507351, -0.127758), new google.maps.LatLng(40.712784, -74.005941), new google.maps.LatLng(28.213545, 94.868713) ],
strokeColor:"#0000FF", strokeOpacity:0.6, strokeWeight:2 }); |
میبینید که یک نمونه جدید از شئ google.maps.polyline ساخته شده و درون ویژگی path اون 4 نقطه ای که مد نظرمون هست رو وارد کردیم. بعد از اون از ویژگی های دیگه ای استفاده کردیم که ظاهر خطوط رو مشخص کنه. با strokeColor رنگ خطوط رو مشخص میکنیم، با strokeOpacity شفافیت خطوط رو مشخص میکنیم و با strokeWeight هم ضخامت خطوط رو مشخص میکنیم.
با استفاده از چندضلعی ها میتونین ناحیه ای رو با استفاده از چند ضلعی انتخاب کنید و رنگ اونا رو عوض کنید و به این صورت به کاربران نشون بدید که شما این محدوده مد نظرتون هست. برای اینکار باید یک نمونه از شئ google.maps.Polygon بسازیم. حالا میخایم مثالی رو در اختیارتون قرار بدیم که در اون سه تا از شهرهای هند رو در اون مشخص کنیم. برای این کار بصورت زیر عمل میکنیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html> <html>
<head> <script src = "http://maps.googleapis.com/maps/api/js"></script>
<script> function loadMap(){
var mapProp = { center:new google.maps.LatLng(17.433053, 78.412172), zoom:6, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var flightPath = new google.maps.Polygon({ path: [ new google.maps.LatLng(17.385044, 78.486671), new google.maps.LatLng(19.696888, 75.322451), new google.maps.LatLng(21.056296, 79.057803) ], strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2, fillColor:"#0000FF", fillOpacity:0.4 });
flightPath.setMap(map); } </script>
</head>
<body onload = "loadMap()"> <div id = "googleMap" style = "width:580px; height:400px;"></div> </body>
</html> |
خروجی بصورت زیر خواهد بود:
همونطور که دیدید یک سه ضلعی مشخص شده. برای این کار کدهای زیر استفاده شده:
1 2 3 4 5 6 7 8 9 10 11 12 | var flightPath = new google.maps.Polygon({ path: [ new google.maps.LatLng(17.385044, 78.486671), new google.maps.LatLng(19.696888, 75.322451), new google.maps.LatLng(21.056296, 79.057803) ], strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2, fillColor:"#0000FF", fillOpacity:0.4 }); |
میبینید که یک نمونه جدید از شئ google.maps.polygon ساخته شده و درون ویژگی path اون 3 نقطه ای که مد نظرمون هست رو وارد کردیم. نقاط بیشتری رو هم اگه بخوایم میتونیم وارد کنیم. بعد از اون با استفاده از ویژگی fillColor رنگ درونی ناحیه رو مشخص کردیم و با استفاده از ویژگی fillOpacity هم شفافیت اون رو تعریف کردیم.
در جلسات بعدی بیشتر در مورد این ابزار قدرتمند گوگل صحبت میکنیم.
امیدوارم از این جلسه خوشتون اومده باشه.
موفق باشید
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 314 تاريخ : جمعه 25 تير 1395 ساعت: 8:32
توضیحات : وردپرس به عنوان محبوب ترین سیستم مدیریت محتوا در بین اکثر کاربران فضای مجازی به خوبی شناخته شده است و این موضوع باعث شده تا سیستم های مختلفی برای وردپرس تهیه و به بازار عرضه شود. هر چند وردپرس خود رایگان است اما قابلیت های توسعه آن از جمله قالب ها و پلاگین ها که به کاربران کمک می کند سیستم مورد نظر خود را پیاده سازی کنند، باعث شده است تا رونق بسیار زیادی در بازار فروش قالب ها و پلاگین های آن ایجاد شود. فروش هایی که تا دهها میلیون دلار هم برای یک افزونه می رسد! در این دوره سعی کرده ایم تمامی مواردی که شما برای تهیه یک پلاگین عالی و کاملا حرفه ای نیاز دارد را قرار دهیم و تدریس نماییم. آموزش ها به صورت کاملا پروژه محور و کاربردی تهیه شده است، پلاگین هایی حرفه ای که هم نحوه ایجاد و کدنویسی آنها را یاد خواهید گرفت و هم آنها را در پایان دوره خواهید داشت. شما پس از گذراندن این دوره قادر خواهید بود هر نوع پلاگین دلخواه دیگری را که فکر می کنید برای سایت خود بنویسید. لازم به ذکر است در صورت سفارش پلاگین های طراحی و کدنویسی شده در این دوره، باید هزینه ای حداقل 800 هزارتومانی بپردازید! در صورتی که در این دوره شما فقط با پرداخت هزینه ای اندک، هم پلاگین نویسی حرفه ای خواهید شد و هم این پلاگین ها را در پایان دوره خواهید داشت. تدریس مباحث این دوره نیز به مانند دوره های دیگر سون لرن، بر اساس اصل صداقت در تدریس و جامع بودن دوره هاست و مدرس تمامی تجربیات حرفه ای خود در این زمینه را به شما انتقال خواهد داد! به جرئت می توانیم ادعا کنیم دوره حاضر حرفه ای ترین و استانداردترین دوره پلاگین نویسی وردپرس است که در سطح ایران برگزار می گردد. پس فرصت را از دست ندهید و خود را به یک پلاگین نویس حرفه ای وردپرس تبدیل کنید!
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 313 تاريخ : جمعه 25 تير 1395 ساعت: 8:32
توضیحات : سیستم عامل اندروید، با بیش از یک میلیارد کاربر در دنیا بالغ بر 70 درصد سهم سیستم عامل های تلفن های همراه را به خود اختصاص داده است. همین موضوع باعث شده تا بازار کاری با پتانسیل بالا برای برنامه نویسی اندروید ایجاد گردد. با توجه به استقبال کاربران و درخواست های مکرر شما دوستان عزیز سعی کردیم دوره ای جامع و کامل را در زمینه برنامه نویسی اندروید برگزار نماییم. در این دوره تمامی مفاهیم مقدماتی تا پیشرفته اندروید را به صورت کاملا پروژه محور آموزش خواهیم داد. پس از گذراندن این دوره می توانید هر برنامه و اپ اندرویدی که می خواهید، با بهترین کیفیت و آخرین تکنولوژی های روز تولید کنید. این دوره طوری طراحی شده که تمام نیازهای بازار کار را پاسخگو می باشد. زبان برنامه نویسی استفاده شده در این دوره جاواست که بهینه ترین، پر سرعت ترین و با کیفیت ترین اپ های اندروید را با آن می توان تولید کرد و گوگل این روش را با آخرین به روزرسانی ها به بهترین شکل پشتیبانی می کند. برای گذراندن این دوره، نیاز به تجربه برنامه نویسی پیشرفته ندارید، ما سعی کردیم اکثر مفاهیم مورد نیاز شما را در جلسات ابتدایی آموزش دهیم. این دوره نیز بر اساس اصل قیمت گذاری منصفانه در سون لرن با هزینه ای بسیار کمتر از آنچه در دوره های حضوری می پردازید در دسترس شما خواهد بود.
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 329 تاريخ : جمعه 25 تير 1395 ساعت: 8:32
در این مطلب با ادامه آموزش Google Maps در خدمتتون هستیم.
در جلسه قبل در مورد قرار دادن Marker بر روی نقشه و همچنین دادن افکت انیمیشنی به اون براتون توضیح دادیم. در این جلسه قصد داریم کارای دیگه رو با Marker انجام بدیم.
در ابتدا بار دیگه نشانگر پیش فرض رو به شما نشون میدیم:
گوگل به شما اجازه میده که نشانه پیش فرض اون رو دستکاری کنید و هر آیکونی که خودتون دوست دارید رو جای اون قرار بدید. برای اینکار باید از ویژگی icon استفاده کنیم و آدرس اون شکلی که میخایم جای نشانگر پیش فرض قرار بگیره رو مشخص کنیم. برای اینکار بصورت زیر عمل میکنیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html>
<head> <script src = "http://maps.googleapis.com/maps/api/js"></script>
<script> function loadMap() {
var mapOptions = { center:new google.maps.LatLng(17.377631, 78.478603), zoom:18 }
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({ position: new google.maps.LatLng(17.377631, 78.478603), map: map, icon:'http://www.7lea.com/favicon-apple.png' });
marker.setMap(map); } </script>
</head>
<body onload = "loadMap()"> <div id = "sample" style = "width:580px; height:400px;"></div> </body>
</html> |
همونطور که دیدید مقابل ویژگی icon آدرس یک تصویر رو قرار دادیم که همون لوگوی سون لرن هست. خروجی بصورت زیر میشه:
اگه دقت کرده باشید با درگ کردن آیکون با نقشه تکون میخوره و نمیشه اون رو بر روی نقشه تغییر مکان داد. اگر بخواید کاری کنید که قابلیت درگ شدن به نشانگر اضافه بشه، باید از ویژگی draggable استفاده کنید و مقدار اون رو برابر با true قرار بدین. برای اینکار بصورت زیر عمل میکنیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html> <html>
<head> <script src = "http://maps.googleapis.com/maps/api/js"></script>
<script> function loadMap() {
var mapOptions = { center:new google.maps.LatLng(17.377631, 78.478603), zoom:18 }
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({ position: new google.maps.LatLng(17.377631, 78.478603), map: map, icon:'http://www.7lea.com/favicon-apple.png', draggable: true });
marker.setMap(map); } </script>
</head>
<body onload = "loadMap()"> <div id = "sample" style = "width:580px; height:400px;"></div> </body>
</html> |
خروجی بصورت زیر میشه:
میبینید که با گرفتن آیکون و کشیدن اون، میتونین آیکون رو به نقاط مختلفی جابجا کنید و در اونجا مستقرش کنید.
حالا مثلا میخایم کاری کنیم که با زدن بر روی دکمه های مختلف آیکون رو اضافه و حذف کنیم. برای اینکار بصورت زیر عمل میکنیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <!DOCTYPE html> <html>
<head> <script src = "http://maps.googleapis.com/maps/api/js"></script>
<script> function loadMap() {
var mapOptions = { center:new google.maps.LatLng(17.377631, 78.478603), zoom:18 }
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({ position: new google.maps.LatLng(17.377631, 78.478603), icon:'http://www.7lea.com/favicon-apple.png', draggable: true }); var add = document.getElementById('add'), remove = document.getElementById('remove'); add.addEventListener('click', function () { marker.setMap(map); });
remove.addEventListener('click', function () { marker.setMap(null); }); } </script>
</head>
<body onload = "loadMap()"> <div id = "sample" style = "width:580px; height:400px;"></div> <br><br> <button id="add">Add Marker</button> <br><br> <button id="remove">Remove Marker</button> </body>
</html> |
خروجی بصورت زیر میشه:
همونطور که دیدید با کلیک بر روی Add Marker یک آیکون اضافه میشه و با کلیک بر روی Remove Marker آیکون اضافه شده حذف میشه. این کار رو با استفاده از متد setMap انجام دادیم. برای حذف کردن این آیکون کافیه که برای نشانگر، نقشه ای که میخاد در اون نمایش داده بشه رو مشخص نکنیم. برای اینکار درون این متد null رو قرار میدیم. هر زمان که خواستیم این نشانگر برای این نقشه قرار داده بشه، نقشه مورد نظر یا همون متغیر map رو درون این متد قرار میدیم.
در جلسات بعدی بیشتر در مورد این ابزار قدرتمند گوگل صحبت میکنیم.
امیدوارم از این جلسه خوشتون اومده باشه.
موفق باشید
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 331 تاريخ : پنجشنبه 24 تير 1395 ساعت: 10:21
توضیحات : وردپرس به عنوان محبوب ترین سیستم مدیریت محتوا در بین اکثر کاربران فضای مجازی به خوبی شناخته شده است و این موضوع باعث شده تا سیستم های مختلفی برای وردپرس تهیه و به بازار عرضه شود. هر چند وردپرس خود رایگان است اما قابلیت های توسعه آن از جمله قالب ها و پلاگین ها که به کاربران کمک می کند سیستم مورد نظر خود را پیاده سازی کنند، باعث شده است تا رونق بسیار زیادی در بازار فروش قالب ها و پلاگین های آن ایجاد شود. فروش هایی که تا دهها میلیون دلار هم برای یک افزونه می رسد! در این دوره سعی کرده ایم تمامی مواردی که شما برای تهیه یک پلاگین عالی و کاملا حرفه ای نیاز دارد را قرار دهیم و تدریس نماییم. آموزش ها به صورت کاملا پروژه محور و کاربردی تهیه شده است، پلاگین هایی حرفه ای که هم نحوه ایجاد و کدنویسی آنها را یاد خواهید گرفت و هم آنها را در پایان دوره خواهید داشت. شما پس از گذراندن این دوره قادر خواهید بود هر نوع پلاگین دلخواه دیگری را که فکر می کنید برای سایت خود بنویسید. لازم به ذکر است در صورت سفارش پلاگین های طراحی و کدنویسی شده در این دوره، باید هزینه ای حداقل 800 هزارتومانی بپردازید! در صورتی که در این دوره شما فقط با پرداخت هزینه ای اندک، هم پلاگین نویسی حرفه ای خواهید شد و هم این پلاگین ها را در پایان دوره خواهید داشت. تدریس مباحث این دوره نیز به مانند دوره های دیگر سون لرن، بر اساس اصل صداقت در تدریس و جامع بودن دوره هاست و مدرس تمامی تجربیات حرفه ای خود در این زمینه را به شما انتقال خواهد داد! به جرئت می توانیم ادعا کنیم دوره حاضر حرفه ای ترین و استانداردترین دوره پلاگین نویسی وردپرس است که در سطح ایران برگزار می گردد. پس فرصت را از دست ندهید و خود را به یک پلاگین نویس حرفه ای وردپرس تبدیل کنید!
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 368 تاريخ : چهارشنبه 23 تير 1395 ساعت: 3:16
توضیحات : سیستم عامل اندروید، با بیش از یک میلیارد کاربر در دنیا بالغ بر 70 درصد سهم سیستم عامل های تلفن های همراه را به خود اختصاص داده است. همین موضوع باعث شده تا بازار کاری با پتانسیل بالا برای برنامه نویسی اندروید ایجاد گردد. با توجه به استقبال کاربران و درخواست های مکرر شما دوستان عزیز سعی کردیم دوره ای جامع و کامل را در زمینه برنامه نویسی اندروید برگزار نماییم. در این دوره تمامی مفاهیم مقدماتی تا پیشرفته اندروید را به صورت کاملا پروژه محور آموزش خواهیم داد. پس از گذراندن این دوره می توانید هر برنامه و اپ اندرویدی که می خواهید، با بهترین کیفیت و آخرین تکنولوژی های روز تولید کنید. این دوره طوری طراحی شده که تمام نیازهای بازار کار را پاسخگو می باشد. زبان برنامه نویسی استفاده شده در این دوره جاواست که بهینه ترین، پر سرعت ترین و با کیفیت ترین اپ های اندروید را با آن می توان تولید کرد و گوگل این روش را با آخرین به روزرسانی ها به بهترین شکل پشتیبانی می کند. برای گذراندن این دوره، نیاز به تجربه برنامه نویسی پیشرفته ندارید، ما سعی کردیم اکثر مفاهیم مورد نیاز شما را در جلسات ابتدایی آموزش دهیم. این دوره نیز بر اساس اصل قیمت گذاری منصفانه در سون لرن با هزینه ای بسیار کمتر از آنچه در دوره های حضوری می پردازید در دسترس شما خواهد بود.
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 339 تاريخ : سه شنبه 22 تير 1395 ساعت: 17:37
توضیحات : سیستم عامل اندروید، با بیش از یک میلیارد کاربر در دنیا بالغ بر 70 درصد سهم سیستم عامل های تلفن های همراه را به خود اختصاص داده است. همین موضوع باعث شده تا بازار کاری با پتانسیل بالا برای برنامه نویسی اندروید ایجاد گردد. با توجه به استقبال کاربران و درخواست های مکرر شما دوستان عزیز سعی کردیم دوره ای جامع و کامل را در زمینه برنامه نویسی اندروید برگزار نماییم. در این دوره تمامی مفاهیم مقدماتی تا پیشرفته اندروید را به صورت کاملا پروژه محور آموزش خواهیم داد. پس از گذراندن این دوره می توانید هر برنامه و اپ اندرویدی که می خواهید، با بهترین کیفیت و آخرین تکنولوژی های روز تولید کنید. این دوره طوری طراحی شده که تمام نیازهای بازار کار را پاسخگو می باشد. زبان برنامه نویسی استفاده شده در این دوره جاواست که بهینه ترین، پر سرعت ترین و با کیفیت ترین اپ های اندروید را با آن می توان تولید کرد و گوگل این روش را با آخرین به روزرسانی ها به بهترین شکل پشتیبانی می کند. برای گذراندن این دوره، نیاز به تجربه برنامه نویسی پیشرفته ندارید، ما سعی کردیم اکثر مفاهیم مورد نیاز شما را در جلسات ابتدایی آموزش دهیم. این دوره نیز بر اساس اصل قیمت گذاری منصفانه در سون لرن با هزینه ای بسیار کمتر از آنچه در دوره های حضوری می پردازید در دسترس شما خواهد بود.
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 327 تاريخ : سه شنبه 22 تير 1395 ساعت: 17:37
در این مطلب میخوام سایتی رو بهتون معرفی کنم که بهمراه ساخت یک منو، کل مفاهیم و اصول CSS Box Model رو به شما آموزش میده و شما رو با اون بصورت کامل آشنا میکنه. همونطور که میدونید Box Model از 4 بخش Content و padding و border و margin ساخته شده. در این آموزش همچنین در مورد ویژگی های CSS مرتبط همچون box-sizing هم آموزش داده شده و شما رو با کاربرد اون آشنا میکنه.
برای شروع وارد سایت box-model بشین.
امیدوارم بدردتون بخوره.
موفق باشید.
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 307 تاريخ : سه شنبه 22 تير 1395 ساعت: 17:37